<template>
    <div class="bg-box">
        <form action="##" class="login">
            <h2>注  册</h2>
            <el-form :label-position="labelPosition" label-width="80px"  ref="ruleForm"
                     :model="ruleForm" status-icon :rules="rules">
                <el-form-item label="用户名" class="login-input" prop="username">
                    <el-input class="userLogin" placeholder="请输入用户名" v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" class="login-input">
                    <el-input type="password" class="userLogin" v-model="ruleForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass" class="login-input">
                    <el-input type="password" class="userLogin" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item class="button-submit">
                    <el-button type="primary" @click="submitForm('ruleForm')" class="submit">提交</el-button>
                    <el-button @click="resetForm('ruleForm')"class="submit1">重置</el-button>
                </el-form-item>
            </el-form>

        </form>
    </div>
</template>
<script>
    export default {
        name: "enter",
            data() {
                var checkUsername = (rule, value, callback) => {
                    if (value==='') {
                        return callback(new Error('用户名不能为空'));
                    }else {
                        callback();
                    }
                };
                var validatePass = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请输入密码'));
                    } else {
                        if (this.ruleForm.checkPass !== '') {
                            this.$refs.ruleForm.validateField('checkPass');
                        }
                        callback();
                    }
                };
                var validatePass2 = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.ruleForm.pass) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                return {
                    labelPosition: 'right',
                    ruleForm: {
                        username: '',
                        password: '',
                        checkPass: ''
                    },
                    rules: {
                        password: [
                            {validator: validatePass, trigger: 'blur'}
                        ],
                        checkPass: [
                            {validator: validatePass2, trigger: 'blur'}
                        ],
                        username:[
                            {validator:checkUsername,trigger:'blur'}
                        ]
                    }
                }
            },

        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
                if(this.ruleForm.username!=''&&this.ruleForm.password!=''&&this.ruleForm.checkPass==this.ruleForm.password){
                    this.$message({
                        message: '注册成功',
                        type: 'success'
                    });
                    this.$router.push({path: '/enter'})
                }

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>
<style scoped>
    .bg-box{
        height: 710px;
        background-image: url("../../assets/images/logo.png");
        background-size: 80% 100%;
        background-repeat: no-repeat;
        background-position-x: 160px;
        background-position-y: 120px;
        background-attachment: fixed;
        border: 1px solid white;
    }
    .login{
        height: 400px;
        width: 500px;
        background: rgba(0, 131, 208, 0.3);
        margin-top: 100px;
        margin-left: 250px;
        border-radius: 30px;
        text-align: center;
    }
    h2{
        padding: 50px;
    }
    .login-input{
        /*width: 450px;*/
        margin-left: 25px;
    }
    .userLogin{
        width: 300px;
    }
    .button-submit{
        margin-left: -80px;
    }
    .submit{
        color: white;
        width: 80px;
        height: 30px;
        margin-left: 30px;
        line-height: 5px;
        background: #475669;
        border-color: #475669;
    }
    .submit1{
        color: #475669;
        width: 80px;
        height: 30px;
        margin-left: 30px;
        line-height: 5px;
        background:white;
        border-color: white;
    }

</style>